import React from 'react';

// 组件数据子传父：实现点击按钮组件，改变颜色

// 组件1
function Btn1(props) {
  // 子组件内部数据
  const obj = { color: 'red' };
  // 定义个事件处理函数
  const fn = () => {
    // 调用事件的时候执行父组件的函数
    props.aa(obj);
  };
  // 返回 JSX
  return <button onClick={fn}>按钮1-变红</button>;
}

// 组件2
function Btn2(props) {
  // 子组件内部数据
  const obj = { color: 'blue' };
  // 定义个事件处理函数
  const fn = () => {
    // 调用事件的时候执行父组件的函数
    props.bb(obj);
  };
  // 返回 JSX
  return <button onClick={fn}>按钮2-变蓝</button>;
}

class App extends React.Component {
  // 父组件自己的数据
  state = {
    color: 'green'
  };

  // 父组件的函数
  changeColor = (obj) => {
    // 调用时改变颜色
    this.setState({ color: obj.color });
  };

  // 渲染函数
  render() {
    return <div>
      <Btn1 aa={this.changeColor} ></Btn1>
      <Btn2 bb={this.changeColor}></Btn2>
      <div style={{ backgroundColor: this.state.color }}>父组件的某个盒子</div>
    </div>;
  }
}

export default App;
